<template>
  <div class="input-item">
    <div class="title">{{title}}</div>
    <div class="txt-input">
      <input type="text" :readonly="readonly" v-model="input" :placeholder="placeholder" @input="handleChange" />
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: '品牌'
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    value: {
      type: String,
      default: ''
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value (newVal) {
      this.input = newVal
    }
  },
  data () {
    return {
      input: ''
    }
  },
  methods: {
    handleChange () {
      this.$emit('change', this.input)
    }
  }
}
</script>
<style lang="scss" scoped>
.input-item {
  font-size: 0;
  margin-bottom: 0.3rem;
  &:last-child {
    margin-bottom: 0;
  }
  .title {
    font-size: 0.32rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(4, 0, 0, 1);
    line-height: 0.75rem;
  }
  .txt-input {
    width: 100%;
    height: 0.72rem;
    position: relative;
    input {
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      background: #fafafa;
      padding: 0.22rem 0.35rem;
      box-sizing: border-box;
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: 400;
      // color: rgba(153, 153, 153, 1);
    }
  }
}
</style>
